<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello WebSocket</title>
<script src="sockjs.js"></script>
<script src="stomp.js"></script>
<script type="text/javascript">
var stompClient=null;

function setConnected(connected) {
	document.getElementById('connect').disabled=connected;
	document.getElementById('disconnect').disabled=!connected;
	document.getElementById('conversationDiv').style.visibility=connected;
	document.getElementById('response').innerHTML='';
}

function connect() {
	var socket=new SockJS('/hello');
	stompClient=Stomp.over(socket);
	stompClient.connect({}, function(frame) {
		setConnected(true);
		console.log('Connected: '+frame);
		stompClient.subscribe('/topic/greetings', function(greeting) {
			showGreeting(JSON.parse(greeting.body).content);
			});
		});
}

function disconnect() {
	if(stompClient != null) {
		stompClient.disconnect();
		}
	setConnected(false);
	console.log("Disconnected");
}

function sendName() {
	var name=document.getElementById("name").value;
	stompClient.send("/app/hello", {}, JSON.stringify({"name":name}));
}

function showGreeting(message) {
	var response=document.getElementById("response");
	var p=document.createElement("p");
	p.style.wordWrap="break-word";
	p.appendChild(document.createTextNode(message));
	response.appendChild(p);
}
</script>
</head>
<body onload="disconnect()">
	<noscript>
		<h2 style="color: #ff0000">Seems your browser doesn't support
			Javascript! Websocket relies on Javascript being enabled. Please
			enable Javascript and reload this page!</h2>
	</noscript>
	<div>
		<div>
			<button id="connect" onclick="connect();">Connect</button>
			<button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
		</div>
		<div>
            <label>What is your name?</label>
            <input type="text" id="name"/>
            <button id="sendName" onclick="sendName();">Send</button>
            <p id="response"></p>
		</div>
	</div>
</body>
</html>